<template>
    <div class="parent">
        <image class="header" :src="img"></image>
        <div class="title">
            <text class="titleText">美丽乡村建设管理平台</text>
        </div>
        <div class="cont">
            <div class="contItem" @click="detail('city')">
                <image class="cityItem" :src="cityImg"></image>
                <div class="item-box">
                    <text class="text">美丽乡村</text>
                    <text class="icon" :style="{ fontFamily: 'wxcIconFont' }">{{'\ue600'}}</text>
                </div>
            </div>
            <div class="contItem" @click="detail('living')">
                <image class="cityItem" :src="livingImg"></image>
                <div class="item-box">
                    <text class="text">人居环境</text>
                    <text class="icon" :style="{ fontFamily: 'wxcIconFont' }">{{'\ue600'}}</text>
                </div>
            </div>
            <div class="contItem" @click="detail('protection')">
                <image class="cityItem" :src="protectionImg"></image>
                <div class="item-box">
                    <text class="text">长效管护</text>
                    <text class="icon" :style="{ fontFamily: 'wxcIconFont' }">{{'\ue600'}}</text>
                </div>
            </div>
            <div class="contItem" @click="detail('account')">
                <image class="cityItem" :src="accountImg"></image>
                <div class="item-box">
                    <text class="text">账号管理</text>
                    <text class="icon" :style="{ fontFamily: 'wxcIconFont' }">{{'\ue600'}}</text>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { getCache } from './util/storageUtils.js'
import { CTCE_DATALIST, CTCE_USER_BASIC } from './config/storageTypes.js'
import { addIconFontSupport } from './config/iconConfig.js'
import qs from 'qs' 
import { webUrl } from './config/index.js'
const defaultImg = 'bmlocal://assets/homeHead.png'
const cityImg = 'bmlocal://assets/city.png'
const livingImg = 'bmlocal://assets/living.png'
const protectionImg = 'bmlocal://assets/protection.png'
const accountImg = 'bmlocal://assets/account.png'
const dom = weex.requireModule('dom')
const modal = weex.requireModule('modal')
export default {
    name: 'menu',
    data () {
        return {
            img: defaultImg,
            cityImg: cityImg,
            livingImg: livingImg,
            protectionImg: protectionImg,
            accountImg: accountImg,
            // account: ''
        }
    },
    beforeCreate () {
        addIconFontSupport(dom, "./")
    },
    created () {
        getCache(CTCE_DATALIST).then(res => {
            const data = JSON.parse(res)
            // data.map(item => {
            //     if (item.DISPMKXZ == '00') {
            //         this.account = item
            //     }
            // })
        })
    },
    methods: {
        detail (key) {
            switch (key) {
                case 'city':
                    // this.$router.toWebView({
                    //     url:'bmlocal://assets/index.html',
                    //     title: '地图展示',
                    //     navShow: true
                    // })
                    this.$router.open({
                        name: 'map'
                    })
                break;
                case 'living': 
                    this.$router.open({
                        name: 'living'
                    })
                break;
                case 'protection': 
                    this.$router.open({
                        name: 'protection'
                    })
                break;
                case 'account': 
                    this.$router.open({
                        name: 'account'
                    })
                break
            }
        }
    }
}
</script>
<style scoped>
.parent{
    width: 750px;
}
.header {
    width: 750px;
    height: 520px;
}
.title{
    position: absolute;
    top: 214px;
    width: 750px;
    height: 84px;
    justify-content: center;
    align-items: center;
}
.titleText{
    font-size:60px;
    font-family:PingFang-SC-Medium;
    color:rgba(255,255,255,1);
}
.cityItem{
    width: 314px;
    height: 314px;
}
.cont {
    width: 750px;
    padding-top: 40px;
    flex-direction: row;
    flex-wrap: wrap;
}
.contItem{
    width: 314px;
    height: 314px;
    margin-left: 40px;
    margin-bottom: 40px;
    
}
.item-box{
    position: absolute;
    width: 314px;
    height: 314px;
    left: 0%;
    top: 0%;
    justify-content: center;
    align-items: center;
}
.text{
    font-size:40px;
    font-family:PingFangSC-Regular;
    color:rgba(255,255,255,1);
}
.icon{
    margin-top: 18px;
    font-size:60px;
    font-family:PingFangSC-Regular;
    color:rgba(255,255,255,1);
}
</style>
